<template>
  <div class="menu-box">
    <div
      class="menu-box-item"
      v-for="(item, index) in menuList"
      :key="item.id"
      @click="routerChange(item, index)"
      :class="selIndex == index ? 'menu-box-item-yes' : 'menu-box-item-no'"
    >
      <div
        class="menu-text"
        :class="selIndex == index ? 'menu-sel-yes' : 'menu-sel-no'"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "set",
  data() {
    return {
      menuList: [
        {
          name: "Jvav",
          id: 1,
        },
        {
          name: "PHP",
          id: 2,
        },
        {
          name: "Python",
          id: 3,
        },
        {
          name: "Android",
          id: 4,
        },
        {
          name: "销售",
          id: 5,
        },
       
      ],
      selIndex: 0,
    };
  },
  mounted() {
    
  },
  methods: {
    routerChange(val, index) {
      this.selIndex = index;
    //   this.$router.push(val.url);
    },
  },
};
</script>
<style lang="less" scoped>
.menu-box {
  display: flex;
  align-items: center;
  height: 100%;
  .menu-box-item:nth-child(1) {
    margin-left: 30px;
  }
  .menu-box-item {
    min-width: 35px;
    margin-left: 40px;
    .menu-text {
      cursor: default;
      font-size: 17px;
      font-weight: 600;
    }
    .menu-sel-yes {
      color: #4095e5;
      font-size: 17px;
      font-weight: 600;
      line-height: 30px;
      border-bottom: 2.5px solid #4095e5;
      text-shadow: 2px 5px 5px gray;
    }
    .menu-sel-no {
      line-height: 30px;
      color: #ffffff;
      font-size: 17px;
      // margin-left: 10px;
    }
  }
}
</style>
